﻿<!-- #layout name=blank-->

<div id="app">
  <div class="page-header">
    <h1 class="title">Data sources</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <ul class="nav nav-tabs">
    <li class="active"
      ><a href="#tab_1_1" data-toggle="tab" aria-expanded="true">Public</a></li
    >
    <li class=""
      ><a href="#tab_1_2" data-toggle="tab" aria-expanded="false"
        >Private</a
      ></li
    >
  </ul>
  <div class="tab-content">
    <section class="tab-pane fade active in" id="tab_1_1">
      <table
        id="publicDataSourceTable"
        class="table table-striped table-hover data-source-table"
      >
        <thead>
          <tr>
            <th>Name</th>
            <th class="table-common">Type</th>
            <th class="table-common">Used by</th>
            <th class="table-action"></th>
            <th class="table-action"></th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item,index) in publicDataSource">
            <tr :key="index" :data-name="item.level">
              <td>
                <span class="table-tree-indent"></span>
                <a class="table-tree-toggle" href="#">
                  <i class="fa fa-caret-down" v-if="item.methods.length"></i>
                  <i class="fa fa-file margin-right-5"></i
                  >{{ item.displayName }}
                </a>
                <span v-if="item.isThridPartyDataSource" class="text-muted">{{
                  item.assembly
                }}</span>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td class="text-right">
                <div class="btn-group" v-kb-tooltip="Kooboo.text.tooltip.add">
                  <button
                    class="btn btn-xs blue dropdown-toggle"
                    data-toggle="dropdown"
                    ><i class="fa fa-plus"></i
                  ></button>
                  <ul class="dropdown-menu pull-right">
                    <template v-for="method in item.methods">
                      <li :key="method.id" v-if="method.isGlobal">
                        <a :href="method.newMethodUrl">{{
                          method.methodName
                        }}</a>
                      </li>
                    </template>
                  </ul>
                </div>
              </td>
            </tr>
            <tr
              v-for="method in item.methods"
              :key="index + '_' + method.id"
              :data-parent="item.level"
            >
              <td>
                <span class="table-tree-indent" style="width: 11px;"></span>
                <span
                  v-if="method.isGlobal"
                  :data-content="method.des"
                  data-toggle="popover"
                  data-trigger="hover"
                  data-placement="right"
                  title="Description"
                >
                  <i class="fa fa-flash"></i> <span></span>
                  {{ method.methodName }}
                </span>
                <a
                  v-else
                  :href="method.editUrl"
                  :data-content="method.des"
                  data-toggle="popover"
                  data-trigger="hover"
                  data-placement="right"
                  title="Description"
                >
                  <i class="fa fa-flash"></i>
                  {{ method.methodName }}
                </a>
              </td>
              <td>
                <span v-if="method.isGlobal" class="label label-sm blue"
                  >Global</span
                >
                <span v-else class="label label-sm orange">Local</span>
              </td>
              <td>
                <a
                  v-for="refer in Object.keys(method.relations) "
                  :key="refer"
                  href="javascript:;"
                  class="label label-sm"
                  @click.stop="getRelation(method.id,refer)"
                  :style="{background:Kooboo.getLabelColor(refer.toLowerCase())}"
                  >{{
                    method.relations[refer] +
                      " " +
                      Kooboo.text.component.table[refer.toLowerCase()]
                  }}</a
                >
                <span v-if="Object.keys(method.relations).length==0">-</span>
              </td>
              <td>
                <a
                  v-if="!method.isGlobal"
                  :href="method.editUrl"
                  class="btn btn-sm btn-default blue"
                  >Edit</a
                >
              </td>
              <td class="text-right">
                <a
                  v-if="!method.isGlobal"
                  href="javascript:;"
                  class="btn btn-xs red"
                  @click="deleteMethod(method)"
                  ><i class="fa fa-minus"></i
                ></a>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </section>
    <section class="tab-pane fade" id="tab_1_2">
      <table
        id="privateDataSourceTable"
        class="table table-striped table-hover data-source-table"
      >
        <thead>
          <tr>
            <th>Name</th>
            <th class="table-common">Type</th>
            <th class="table-common">Used by</th>
            <th class="table-action"></th>
            <th class="table-action"></th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item,index) in privateDataSource">
            <tr :key="index" :data-name="item.level">
              <td>
                <span class="table-tree-indent"></span>
                <a class="table-tree-toggle" href="#">
                  <i v-if="item.methods.length" class="fa fa-caret-down"></i>
                  <i class="fa fa-file margin-right-5"></i
                  >{{ item.displayName }}
                </a>
                <span v-if="item.isThridPartyDataSource" class="text-muted">{{
                  item.assembly
                }}</span>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td class="text-right"></td>
            </tr>
            <tr
              v-for="method in item.methods"
              :key="index + '_' + method.id"
              :data-parent="item.level"
            >
              <td>
                <span class="table-tree-indent" style="width: 11px;"></span>
                <span
                  v-if="method.isGlobal"
                  :data-content="method.des"
                  data-toggle="popover"
                  data-trigger="hover"
                  data-placement="right"
                  title="Description"
                >
                  <i class="fa fa-flash"></i> <span></span>
                  {{ method.methodName }}
                </span>
                <span
                  v-else
                  :data-content="method.des"
                  data-toggle="popover"
                  data-trigger="hover"
                  data-placement="right"
                  title="Description"
                >
                  <i class="fa fa-flash"></i>
                  {{ method.viewName + " " + method.originalMethodName }}
                </span>
              </td>
              <td>
                <span v-if="method.isGlobal" class="label label-sm blue"
                  >Global</span
                >
                <span v-else class="label label-sm orange">Local</span>
              </td>
              <td>
                <a
                  v-for="refer in Object.keys(method.relations) "
                  :key="refer"
                  href="javascript:;"
                  class="label label-sm"
                  @click.stop="getRelation(method.id,refer)"
                  :style="{background:Kooboo.getLabelColor(refer.toLowerCase())}"
                  >{{
                    method.relations[refer] +
                      " " +
                      Kooboo.text.component.table[refer.toLowerCase()]
                  }}</a
                >
                <span v-if="Object.keys(method.relations).length==0">-</span>
              </td>
              <td></td>
              <td class="text-right"></td>
            </tr>
          </template>
        </tbody>
      </table>
    </section>
    <kb-relation-modal></kb-relation-modal>
  </div>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/tableModel.js"
    ]);
  })();

  new Vue({
    el: "#app",
    data: function() {
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.DataSources
          }
        ],
        publicDataSource: [],
        privateDataSource: []
      };
    },
    mounted: function() {
      this.init();
    },
    methods: {
      init: function() {
        var self = this;
        $.when(
          Kooboo.DataSource.getPublicData(),
          Kooboo.DataSource.getPrivateData()
        ).then(function(publicRes, privateRes) {
          self.publicDataSource = self.getDataWithFilter(
            publicRes[0].model,
            false
          );
          self.privateDataSource = self.getDataWithFilter(
            privateRes[0].model,
            true
          );
          self.$nextTick(function() {
            self.initTable();
          });
        });
      },
      getRelation: function(id, by) {
        Kooboo.EventBus.publish("kb/relation/modal/show", {
          id: id,
          by: by,
          type: "DataMethodSetting"
        });
      },
      getUrl: function(method, type) {
        return Kooboo.Route.Get(Kooboo.Route.DataSource.DataMethodSetting, {
          id: method.id,
          isNew: type.toLowerCase() == "edit" ? method.isNew : true
        });
      },
      renderDescription: function(method) {
        var str = "";
        if (!!method.description) {
          str += "<p>" + method.Description + "</p>";
        }
        if (method.parameters !== null) {
          str += '<table class="table table-condensed">';
          _.forEach(method.parameters, function(value, key) {
            str += "<tr><th>" + key + "</th><td>" + value + "</td></tr>";
          });
          str += "</table>";
        }
        return str;
      },
      deleteMethod: function(method) {
        var self = this;
        if (confirm(Kooboo.text.confirm.deleteItem)) {
          Kooboo.DataSource.Delete({
            Id: method.id
          }).then(function(res) {
            if (res.success) {
              self.init();
              window.info.done(Kooboo.text.info.delete.success);
            } else {
              window.info.done(Kooboo.text.info.delete.fail);
            }
          });
        }
      },
      getDataWithFilter: function(dataSource, excludeEmptyName) {
        var me = this;
        dataSource.forEach(function(data, index) {
          data.level = "Level1-" + index;
          data.methods.forEach(function(method) {
            method.des = me.renderDescription(method);
            method.editUrl = me.getUrl(method, "edit");
            method.newMethodUrl = me.getUrl(method, "new");
          });

          if (excludeEmptyName) {
            data.methods = _.filter(data.methods, function(method) {
              return !!method.viewName;
            });
          }
        });
        return dataSource;
      },
      initTable: function() {
        $("body").on("click", ".table-tree-toggle", function(e) {
          var t = e.target;
          e.preventDefault();
          $(t)
            .find(".fa-caret-down, .fa-caret-right")
            .toggleClass("fa-caret-right")
            .toggleClass("fa-caret-down");
          var nodeName = $(t)
            .parents("tr")
            .data("name");
          $(t)
            .parents("table")
            .find('[data-parent="' + nodeName + '"]')
            .toggle();
        });
      }
    }
  });
</script>
